<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WorldFileSystem</title>
</head>
<link href="../js/layui/css/layui.css" rel="stylesheet">
<script src="../js/vue.global.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script>

</script>
<body>
    <div class="layui-layout layui-layout-admin layui-bg-gray">
        <div class="layui-card" style="margin: 15px;">
            <div class="layui-card-header">
                <span class="layui-font-22">WorldFile</span>
            </div>
            <div id="file_list" class="layui-card-body">
                <div>
                    <table class="layui-table">
                        <colgroup>
                            <col width="60">
                            <col>
                            <col width="100">
                        </colgroup>
                        <tbody v-for="(value, key) in response_data">
                            <tr v-if="value.type === 4">
                                <td>
                                    <embed height="12px"  src="/icon/directory.svg" type="image/svg+xml" />
                                </td>
                                <td>
                                    <a href="javascript:;" onclick="if(this.textContent==='.'){loadFiles(getPath());}else if(this.textContent==='..'){delPath();loadFiles(getPath());}else{loadFiles(getPath()+this.textContent);addPath(this.textContent)}">
                                        {{ value.name }}
                                    </a>
                                </td>
                                <td>
                                    <button type="button" class="layui-btn" :onclick="'window.parent.postMessage(default_path.value +\''+value.name+' \')'">选择</button>
                                </td>
                            </tr>
                            <tr  v-else-if="value.type === 8" >
                                <td>
                                    <embed height="12px"  src="/icon/file.svg" type="image/svg+xml" />
                                </td>
                                <td>
                                    <a :href="'/VFile'+default_path+value.name">
                                        {{ value.name }}
                                    </a>
                                </td>
                                <td>
                                    <button type="button" class="layui-btn" :onclick="'window.parent.postMessage(default_path.value +\''+value.name+' \')'">选择</button>
                                </td>
                            </tr>
                            <tr v-else-if="value.type === 10" href="javascript:;">
                                <td>
                                    <embed height="12px" src="/icon/subdirectory-right.svg" type="image/svg+xml" />
                                </td>
                                <td>
                                    <a href="javascript:;" onclick="if(this.textContent==='.'){loadFiles(getPath());}else if(this.textContent==='..'){delPath();loadFiles(getPath());}else{loadFiles(getPath()+this.textContent);addPath(this.textContent)}">
                                        {{ value.name }}
                                    </a>
                                </td>
                                <td>
                                    <button type="button" class="layui-btn" :onclick="'window.parent.postMessage(default_path.value +\''+value.name+'\')'">选择</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    //TODO: 文件上传功能实现，以及文件管理
    const { createApp, ref } = Vue;
    let element;
    let layer;
    let util;
    let $;
    let default_path=ref("/");

    //路径逻辑 实现
    let pathList=[];
    function addPath(pi){
        pathList.push(pi);
    }
    function delPath(){
        pathList.pop();
    }
    function getPath(){
        let path="";
        for (const pi in pathList) {
            path+="/"+pathList[pi];
        }
        return path+"/";
    }

    layui.use(['element', 'layer', 'util'], function(){
        element = layui.element;
        layer = layui.layer;
        util = layui.util;
        $ = layui.$;
    });
    const response_data=ref([".",".."]);
    async function loadFiles(path) {
        $.ajaxSettings.async = false;  //设置为同步请求
        default_path.value=path+"/";
        $.ajax({
            url: "/api/getfiles",
            data: JSON.stringify({"path": path ,"Code":"OK"}),
            type: "post",
            success: function (response) {
                if(response.Code==="OK"){
                    response_data.value=response.files.sort(function (a,b) {
                        return a.name>b.name ? 1:-1;
                    });
                }else{

                }
            },
            error: function (xhr, status, error) {

            }
        });
        $.ajaxSettings.async = true;
    }

    setTimeout(function (){

        loadFiles(default_path.value);

        },200);

    const app_tb1=createApp({
        setup() {
            return {
                response_data,
                default_path
            }
        }
    }).mount('#file_list')
</script>
</html>
